<template>
    <div class="bg">
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;"
            class="tabbar"
         >目录
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
        <p style="margin:47px 0 0 0"></p>

        <div class="cardbox">
            <div style="position:relative;border-bottom:solid 1px #ddd">
                <span>{{this.name}}</span>
                <span style="color:red;font-size:13px">{{this.catalogNum}}章</span>
                <span @touchstart="lastShow" class="fa fa-arrow-down sort"></span>
            </div>
            <div>
                <span class="newcata">最新</span>
                <span style="color:#222;font-weight:bold;margin-left:20px;">{{this.lastCatalog}}</span>
            </div>
        </div>
        <div class="catalogs">
            <p>作品相关</p>
            <p>正文</p>
            <p v-for="(c,i) in catalog" :key="i" @touchstart="addRead(i)">{{c}}</p>
        </div>
        <p v-show="showAdd" @touchstart="addCatalog">加载更多...</p>
        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>
    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        components:{
            XHeader
        },
        data:function(){
            return {
                catalog:[],
                lastCatalog:null,
                catalogNum:null,
                name:null,
                evercatalog:[],
                allDownCatalog:[],
                num:0,
                showAdd:true,
                oncatalog:[],
                downcatalog:[],
                isdown:0,
            }
        },
        mounted:function(){
            this.http.get("/api/booksId",{params:{id:this.$route.params.id}})
            .then(res=>{
                this.name = res.data.data.name;
                this.evercatalog = res.data.data.catalog;
                this.catalogNum = res.data.data.catalog.length;
                this.lastCatalog = res.data.data.catalog[this.evercatalog.length-1];
                // this.allDownCatalog = this.evercatalog;
                for(var i = this.catalogNum-1;i>=0;i--){
                    this.allDownCatalog.push(this.evercatalog[i]);
                }

                var a = this.num+10;
                if(this.catalogNum<a){
                    a =this.catalogNum;
                }
                for(var i = 0;i<a;i++){
                    this.catalog.push(this.evercatalog[i]);
                };
                this.num++;  
                if(this.num>this.evercatalog.length/10){
                    this.showAdd = false;
                }
                // console.dir(this.catalog)
            });
            
        },
        methods:{
            addCatalog:function(){
                var a =this.num*10;
                if(this.isdown){
                    if(a+10>this.allDownCatalog.length){
                        a = this.allDownCatalog.length;
                    }
                    for(var i = a;i<a+10;i++){
                        this.catalog.push(this.allDownCatalog[i]);
                    }  
                }else{
                    if(a+10>this.evercatalog.length){
                        a = this.evercatalog.length;
                    }
                    for(var i = a;i<a+10;i++){
                        this.catalog.push(this.evercatalog[i]);
                    }
                }
                
                this.num++;  
                if(this.num>=this.allDownCatalog.length/10){
                    if(this.isdown){
                        this.downcatalog = this.catalog
                    }else{
                        this.oncatalog = this.catalog
                    }
                    this.showAdd = false;
                }
            },
            lastShow:function(){
                if(this.isdown){
                    this.isdown = 0;
                    if(this.oncatalog!=""){
                        this.catalog =this.oncatalog;
                        return;
                    }
                }else{
                    this.isdown = 1;
                    if(this.downcatalog!=""){
                        this.catalog =this.downcatalog;
                        return;
                    }
                };
                this.num = 0;
                this.showAdd = true;
                this.catalog = [];
                if(this.isdown){
                    for(var i = 0;i<this.num+10;i++){
                        this.catalog.push(this.allDownCatalog[i]);
                    }
                }else{
                    for(var i = 0;i<this.num+10;i++){
                        this.catalog.push(this.evercatalog[i]);
                    }
                }
                this.num++;  
                // if(this.num>this.allCatalog.length/10){
                //     if(this.isdown){
                //         console.log(1)
                //         this.downcatalog = this.catalog
                //     }else{
                //         this.oncatalog = this.catalog
                //     }
                //     this.showAdd = false;
                // }
            },
            addRead:function(i){
                if(this.$store.state.islogin){
                    this.http.get("/api/users/addRead",{params:{id:this.$route.params.id,readin:this.catalog[i]}}).then(res=>{
                        if(!res.data.err){
                            this.$vux.alert.show({
                                title:res.data.msg
                            })
                        }
                    })
                }else{
                    this.$vux.alert.show({
                        title:"请先登录",
                        onHide(){
                            location.href = "/#/login";
                        }
                    })
                } 
            }
        }

    }
</script>

<style scoped>
    .tabbar{
        position: fixed;
        top: 0;
        z-index: 5;
        width: 100%;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .cardbox{
        background-color: white;
        text-align: left;
        padding: 0 20px;
        line-height: 55px;
        border-bottom:solid 1px #ddd;
        border-top:solid 1px #ddd;
    }
    .cardbox div{
        height: 55px;
    }
    /*.sort{
        position: absolute;
        right: 2px;
        top: 10px;
        font-size: 14px;
        color: white;
        background-color: #55BEC1;
        padding: 8px 15px;
        line-height: 20px !important;
        border-radius: 5px;
        transition: all 1s;
    }*/
    .sort{
        position: absolute;
        right: 2px;
        top: 10px;
        font-size: 14px;
        color: white;
        background-color: #55BEC1;
        border: solid 1px orange;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px !important;
        border-radius: 5px;
        transition: all 1s;
    }
    .sort:hover{
        background-color: yellow;
        color: blue;
        border-radius: 50%;
        transform: rotate(180deg);
    }
    .sort:active{
        box-shadow: 0 0 100px red;
    }

    .newcata{
        font-size: 13px;
        color: white;
        background-color: #f46253;
        padding: 5px;
    }
    .catalogs{
        padding: 0 20px;
        text-align: left;
    }
    .catalogs p{
        margin: 0;
        height: 45px;
        line-height: 45px;
        border-bottom: solid 1px #ccc;
        font-weight: bold;
        font-size: 18px;
        color: #222;
    }
</style>